<template>   
    <el-container class="home_container">
        <!-- 头部区域 -->
       <!-- <el-header>
            <div>
                <img src="" alt="">
                <span>商户管理系统</span>
            </div>
             <el-button type="info" @click="logout">退出</el-button>
        </el-header>-->
        <!-- 页面主体 -->
        <el-container>
            <el-card class="basic_card">
            <!-- 侧边栏 -->
             <el-aside  width="250px"> 
                 <div class="shop_info" @click="gotoHome">
                     <el-avatar icon="el-icon-user-solid" :src="avatarUrl" ></el-avatar>
                     <h>{{shopName}}</h>
                 </div>
                 <!-- 侧边栏菜单区域 -->
               <el-menu default-active="2" class="el-menu-vertical-demo"  background-color="#ffffff"
                    text-color="#67819c"   active-text-color="#ffd04b" unique-opened :collapse="isCollapse" :collapse-transition="false" :router="true" :default-active="$route.path">
                <el-submenu index="/listRent">
                    <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>商品管理</span>
                    </template>
                    <el-menu-item index="/ListRent">租赁商品管理</el-menu-item>
                    <el-menu-item index="/ListShare">共享商品管理</el-menu-item>
                </el-submenu>
                    <el-menu-item index="/order">
                        <i class="el-icon-document"></i>
                        <span slot="title">订单管理</span>
                    </el-menu-item>
                    <el-menu-item index="/shopAccount" >
                        <i class="el-icon-setting"></i>
                        <span slot="title">账户设置</span>
                    </el-menu-item>
                </el-menu>
                 </el-aside>
            <!-- 右侧内容主体 -->
             <el-main>
                 <!-- 路由占位符 -->
                  <router-view></router-view>
                  
             </el-main>
             </el-card>
        </el-container>
    </el-container>
</template>
<script>
export default {
    data(){
        return{
            menulist:[],
            iconsObj:{
                '125':'el-icon-s-custom',
                '103':'el-icon-s-platform',
                '101':'el-icon-s-goods',
                '102':'el-icon-s-order',
                '145':'el-icon-s-data'
            },
            isCollapse:false,
            avatarUrl:'',
            address:'',
            password:'',
            shopName:''
        } 
    },
    created(){
        this.getInfo();
    },
    methods:{
        logout(){
            window.sessionStorage.clear();
            this.$router.push("/login");
        },
        toggleCollapse(){
            this.isCollapse=!this.isCollapse;
        },
        getInfo()
        {
            this.avatarUrl=window.sessionStorage.getItem("merchantAvatar");
            this.shopName=window.sessionStorage.getItem("merchantName");
            this.password=window.sessionStorage.getItem("merchantPassword");
            this.address=window.sessionStorage.getItem("merchantAddress");
        },
        gotoHome()
        {
            this.$router.push("/welcome");
        }
       
    }
}
</script>

<style scoped lang="less">
    .home_container {
        height:100%;
    }
    .basic_card
    {
        border-radius:50px;
         height:90%;
        width:90%;
        margin-top:2% ;
        margin-right:5%;
        margin-left:5%;
        background-color:#f4f5fa;
    }
    .el-menu{
        top:50px;
    }
    .el-header{
        background-color: #373d41;
        display: flex;
        justify-content: space-between;
        padding-left: 0;
        align-items: center;
        color:#fff;
        font-size: 20px;
        >div
        {
            display: flex;
            align-items: center;
            span{
                margin:15px;
            }
        }
}
    .el-aside{
        background-color:#ffffff;
        height: 550px;
        float:left;
        border-radius: 20px;
        margin-right:30px;
        box-shadow:  10px 10px 100px #d0d0d0,
             -10px -10px 100px #ffffff;
}
    .shop_info
    {
        margin-left:100px;
        margin-right:100px;
        margin-top:30px;
        text-align: center;
        .el-avatar{
           margin-bottom: 20px;
        }
    }
    .el-main
    {
        
        width:75%;
        height: 550px;
        border-radius: 20px;
    }
    i{
        margin-right:10px;
    }
    .toggle-button{
        background-color: #4a5064;
        text-align: center;
        font-size:10px;
        line-height: 24px;
        color:#fff;
        letter-spacing: 0.2em;
        cursor: pointer;
    }
    .el-aside
    {
        transition:0.3s;
        .el-avatar
        {
            cursor: pointer;
        }
    }
    
</style>

